<template>
  <div class="full-box shadow-box padding-box">
    <OperateCollection @search="initData">
      <template #condition>
        <div class="condition-item">
          <el-date-picker
            style="width: 150px"
            v-model="queryParams.cur_year"
            type="year"
            value-format="yyyy"
            placeholder="审计年份"
            :clearable="false"
            @change="yearChange"
          >
          </el-date-picker>
        </div>
        <div class="condition-item">
          <el-input
            v-model="queryParams.project_name"
            placeholder="按项目名称查询"
            :clearable="true"
          ></el-input>
        </div>
      </template>
      <template #operate>
        <el-button
          icon="el-icon-plus"
          type="warning"
          @click="dialog.assign = true"
          >项目新增</el-button
        >
        <el-button
          icon="el-icon-search"
          type="primary"
          @click="dialog.plan = true"
          >项目库选择</el-button
        >
      </template>
    </OperateCollection>
    <div class="table-wrapper">
      <BaseTable
        :columns="columns"
        :showSort="true"
        :tableData="tableData"
        :pages="{
          show: true,
          count: count,
        }"
        :operate="{
          show: true,
          width: 200,
        }"
        @pagination="pageChange"
      >
        <template #operate="{ current }">
          <el-button
            type="primary"
            size="mini"
            @click="linkToDetails(current.row)"
            >详情</el-button
          >
          <el-button
            type="danger"
            :disabled="user.user_code != 'admin'"
            size="mini"
            @click="removePlan(current.row)"
            >移除计划</el-button
          >
        </template>
      </BaseTable>
    </div>
    <el-dialog
      width="80%"
      :title="'【 ' + queryParams.cur_year + ' 】年审计项目选择'"
      :visible.sync="dialog.plan"
      :close-on-click-modal="false"
      @close="dialog.plan = false"
    >
      <div class="p-wrapper">
        <OperateCollection :showSearch="false">
          <template #condition>
            <div class="condition-item">
              <el-input
                v-model="filterParams.name"
                placeholder="按项目名称筛选"
                size="normal"
                clearable
                @change="filterProject"
              ></el-input>
            </div>
            <div class="condition-item">
              <el-input
                v-model="filterParams.dept"
                placeholder="按单位筛选"
                size="normal"
                clearable
                @change="filterProject"
              ></el-input>
            </div>
          </template>
          <template #operate>
            <el-button type="primary" size="info" @click="resetFilter"
              >重置</el-button
            >
            <el-button type="primary" size="default" @click="filterProject"
              >筛选</el-button
            >
            <el-button
              type="primary"
              size="warning"
              icon="el-icon-s-promotion"
              @click="enterPlan('上级交办')"
              >纳入上级交办审计计划</el-button
            >
            <el-button
              type="primary"
              size="default"
              icon="el-icon-s-claim"
              @click="enterPlan('年度计划')"
              >纳入年度审计计划</el-button
            >
          </template>
        </OperateCollection>
        <el-table
          border
          stripe
          v-loading="loading"
          :height="500"
          :data="filterProjects"
          :header-cell-style="{
            background: '#e6e8ec',
            color: '#000',
            height: '60px',
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column
            prop="project_name"
            label="项目名称"
            width=""
            min-width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="owner_name"
            label="建设单位"
            width=""
            min-width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="project_address"
            label="建设地址"
            width=""
            min-width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="investment"
            label="投资额（万元）"
            width="150"
            min-width=""
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="project_content"
            label="建设内容"
            width=""
            min-width="300"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div class="check-info">
          <label> 本年剩余未纳入审计计划项目数：</label>
          <span> {{ projects.length }}， </span>
          <label> 当前选中：</label>
          <span>
            {{ checkedProject.length }}
          </span>
        </div>
      </div>
    </el-dialog>
    <ProjectNotInPlan
      :year="queryParams.cur_year"
      :visible.sync="dialog.assign"
      @refresh="initData"
    ></ProjectNotInPlan>
  </div>
</template>

<script>
import BaseTable from "@/components/Common/BaseTable.vue";
import OperateCollection from "../WorkCollection/components/OperateCollection.vue";
import {
  getAuditList,
  getAuditProjectList,
  postAuditBatchAdd,
} from "@/api/Audit/Index";
import ProjectNotInPlan from "./ProjectNotInPlan.vue";
import commonList from "@/mixins/commonList";
export default {
  mixins: [commonList],
  components: { OperateCollection, BaseTable, ProjectNotInPlan },
  data() {
    return {
      loading: false,
      queryParams: {
        cur_year: "",
        is_audit: "",
        is_finish: "",
        project_name: "",
        pageNum: 1,
        pageSize: 20,
      },
      queryParamsFP: {
        year: "",
      },
      count: 0,
      columns: columns,
      tableData: [],
      projects: [],
      dialog: {
        assign: false,
        plan: false,
      },
      filterParams: {
        name: "",
        dept: "",
      },
      filterProjects: [],
      checkedProject: [],
      user: null,
    };
  },
  methods: {
    linkToDetails(item) {
      this.$router.push(`/auditDetails/${item.id}/0`);
    },
    pageChange(val) {
      this.queryParams.pageNum = val.pageNum;
      this.queryParams.pageSize = val.pageSize;
      this.initData();
    },
    yearChange() {
      this.queryParamsFP.year = this.queryParams.cur_year;
      this.initData();
    },
    initData() {
      getAuditList(this.queryParams).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.count = res.num;
        }
      });
    },
    initProject() {
      this.loading = true;
      getAuditProjectList(this.queryParamsFP).then((res) => {
        if (res.code == 0) {
          this.filterProjects = this.projects = res.data;
          this.loading = false;
        }
      });
    },
    filterProject() {
      this.filterProjects = this.projects.filter((i) => {
        return (
          i.project_name.indexOf(this.filterParams.name.trim()) > -1 &&
          i.owner_name.indexOf(this.filterParams.dept.trim()) > -1
        );
      });
    },
    resetFilter() {
      this.filterParams.name = "";
      this.filterParams.dept = "";
      this.filterProject();
    },
    handleSelectionChange(val) {
      this.checkedProject = val;
    },
    enterPlan(type) {
      if (this.checkedProject.length == 0) {
        this.$message.error("当前未选择纳入审计计划的项目");
        return;
      }
      this.$confirm(
        `当前选中的【 ${this.checkedProject.length} 个 】项目将作为【${type}】纳入【${this.queryParams.cur_year}】年审计计划`,
        "计划确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      )
        .then((res) => {
          postAuditBatchAdd({
            cur_year: this.queryParams.cur_year,
            enroll_way: type,
            ids: this.checkedProject
              .map((i) => {
                return i.id;
              })
              .join(","),
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success("纳入审计计划成功");
              this.dialog.plan = false;
              this.initData();
            }
          });
        })
        .catch((err) => {});
    },
    removePlan(item) {
      this.$confirm(
        `【 ${item.project_name} 】 将被移出 【 ${item.cur_year} 】年审计计划`,
        "移除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        }
      ).then((res) => {
        postAuditRemove({
          id: item.id,
        }).then((res) => {
          if (res.code == 0) {
            this.$message.success("计划移除成功");
          }
        });
      });
    },
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("user"));
    this.queryParamsFP.year = this.queryParams.cur_year = new Date()
      .getFullYear()
      .toString();
    this.initData();
  },
  watch: {
    "dialog.plan": {
      handler(newVal, oldVal) {
        if (newVal) {
          this.initProject();
        }
      },
    },
  },
};

const columns = [
  {
    prop: "enroll_way",
    label: "计划类型",
    width: "130",
    minWidth: "",
    align: "",
  },
  {
    prop: "project_name",
    label: "项目名称",
    width: "",
    minWidth: "300",
    align: "",
  },
  {
    prop: "owner_name",
    label: "建设单位",
    width: "",
    minWidth: "200",
    align: "",
  },
  {
    prop: "investment",
    label: "投资额（万元）",
    width: "150",
    minWidth: "",
    align: "",
  },
];
</script>

<style lang="scss" scoped>
.p-wrapper {
  height: 600px;
}
.check-info {
  font-weight: 600;
  height: 40px;
  font-size: 18px;
  display: flex;
  align-items: center;
  label {
    color: #409eff;
  }
}
</style>